<template>
  <div class="register-form">
    <div class="register-form-inner">
      <div class="register-form-header">华为账号登录</div>

      <div class="register-form-item">
        <input type="text" v-model="mobile" placeholder="手机号" @blur="blurMobile" />
      </div>
      <div class="errorDiv" v-show="mobileTips">
        <i class="ic-tips"></i>
        <span class="ic-tips-text">{{mobileTips}}</span>
      </div>

      <div class="register-form-item">
        <input type="text" placeholder="密码" v-model="password" />
      </div>

      <div class="sub-btn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
import { isPhone, check } from "@/assets/common";

export default {
  data() {
    return {
      mobile: "",
      mobileTips: "",
      password: ''
    };
  },
  methods: {
    blurMobile() {
      if (this.mobile && !isPhone(this.mobile)) {
        this.mobileTips = "手机号码不正确";
      } else {
        this.mobileTips = "";
      }
    },

    async login() {
      var data = await this.$http.post("/index.php/login", {
        mobile: this.mobile,
        password: this.password
      });
      if (data.code == 1) {
        this.$message({
          message: "登录成功",
          type: "success"
        });
        window.sessionStorage.setItem('username', data.data.username);
        window.sessionStorage.setItem('uid', data.data.uid);
        setTimeout(() => {
          this.$router.push({
            name: 'index'
          });
        }, 1000);
      } else {
        this.$message({
          message: data.msg,
          type: "error"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .register-form {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 48px;
    .register-form-inner {
      width: 352px;
    }

    .register-form-header {
      font-size: 25.6px;
      color: #191919;
      text-align: center;
    }

    .register-form-header-hascount {
      margin-top: 6.4px;
      font-size: 14.4px;
      color: #191919;
      display: flex;
      justify-content: center;

      .register-form-header-hascount-link {
        display: inline-block;
        color: #007dff;
        font-size: 14.4px;
        cursor: pointer;
      }
    }

    .register-form-item {
      margin-top: 16px;
      width: 100%;
      border-radius: 6.4px;

      input {
        width: 100%;
        height: 38px;
        outline: 0;
        border: 0;
        background: #f2f2f2;
        padding: 0 12px;
      }
    }

    .relative {
      position: relative;
    }

    .vscode {
      margin-right: 12.8px;
      margin-top: 8.8px;
      position: absolute;
      top: 0;
      right: 0;
      color: #007dff;
      font-size: 11.200000000000001px;
      cursor: pointer;
    }

    .sub-btn {
      cursor: pointer;
      width: 220.8px;
      font-size: 14.4px;
      font-weight: 400;
      height: 38.400000000000006px;
      color: #fff;
      border-radius: 6.4px;
      background: #a9cfff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      margin-top: 40px;
    }
  }

  .hwid-input-msg-error {
    margin: 6.4px;
  }

  .hwid-root .hwid-input-msg-error .errorDiv {
    display: flex;
  }

  .hwid-root .hwid-input-msg-error .errorDiv .ic-tips {
    margin-right: 3.2px;
    margin-left: 0;
  }

  .ic-tips {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fe3421;
    border-radius: 50%;
  }
  .ic-tips-text {
    font-size: 10px;
    color: #fa2a2d;
  }
</style>